<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script type="text/javascript" src="../../js/base.js" ></script>
	<body>
		<span>过滤输入</span>
		<div>未了使文本框输入指定的字符，我们必须对输入的字符进行验证。
		有一种做法是判断字符是否合法，这是提交后的操作。还可以在提交前限制某些字符，过滤输入
		</div>

			<form id='myform' name="youfrom">
			只能输入一个<input type="text" name="a1"  maxlength="1"/>	
			只能输入5个<input type="text" name="a2"  maxlength="5"/>	
			
			只能输入10个<input type="text" name="a3"  maxlength="10"/>	
				<br />
			姓名：<input type="text" name="user" value="text" /><br />
			文本域：<br />
			<textarea name="content">请输入</textarea>
			
		</form>
	</body>
	
	<script>
		//获取value
			var fm = document.getElementById('myform');
			var user = fm.elements['user'];
			var content = fm.elements['content'];
			
		window.addEventListener('load',function(){
			
		
			
			//1禁止或屏蔽非数字键的输入，阻止非数字键的默认行为
		/*	addEvent(content,'keypress',function(eve){
				
				//keypress键盘输入事件
				var e = eve||window.event;
				var charCode = getCharCode(e);
				//alert(charCode);
				//正则表达式获取文本是否为数字
				if(!/\d/.test(String.fromCharCode(charCode))&&charCode>8){//charCode>0兼容火狐的退格键
					
					preDef(e);//阻止默认行为》》屏蔽掉非数字键的功能
					alert('只能输入数字');
				}
				//ps  charCode>N;N只限于放开光标键退格键删除键等，火狐的退格键为0，苹果比如字符 a 为 97 
				
			});*/
				
				
	/*		//不允许	复制剪切粘贴,这里阻止默认行为用户体验也不是很好
			//beforecopy 复制前	
			addEvent(content,'copy',function(eve){
				alert('复制时')
				preDef(eve);
			});
			
			//beforecut剪切前
				addEvent(content,'cut',function(eve){
				alert('剪切时')
				preDef(eve);
			});
			//beforepaste粘贴前
				addEvent(content,'paste',function(eve){
				alert('粘贴时')
				preDef(eve);
			});*/
			
			//阻止中文输入法；但是谷歌无效（并且屏蔽输入法用户体验不好，无法弹出中文输入法）
			//content.style.imeMode = 'disabled';//给文本添加属性
			
		
			
			
			
			//2验证后取消，可以先输入非法字符，然后判断并取消非法输入
			addEvent(content,'keyup',function(eve){//键盘弹起时触发
				this.value = this.value.replace(/[^\d]/g,'');//将非数字转换为空
			});
			
			//事件注册和调用
			addEvent(fm.elements['a1'],'keyup',tabWard);
			//addEvent(fm.elements['a2'],'keyup',tabWard2);
			addEvent(fm.elements['a3'],'keyup',tabWard2);
			
			fm.elements['a2'].addEventListener('keyup',function(e){
				tabWard2(e);
			},false);
			
			
			
		},false);
		
		
		
		
		
		//自动切换焦点
		//为了增加表单字段的易用性，很多字段在满足一定条件时（如长度），就会自动切换到下一个字段上继续填写
	
		function tabWard(eve){
			var e = eve||window.event;
			//判断当前长度是否和我们输入的长度一致
			if(this.value.length == this.maxLength){
				//遍历所有的控件
				for(var i=0;i<fm.elements.length;i++){
					if(fm.elements[i]==this){
						fm.elements[i+1].focus();//将光标移入下一个
						return;
					}
				}
			
			}
		}
	

		
		function tabWard2(eve){
			var e = eve||window.event;
			//获取目标节点
			var target =getTarget(e);
			//判断当前长度是否和我们输入的长度一致
			if(target.value.length == target.maxLength){
				//遍历所有的控件字段
				for(var i=0;i<fm.elements.length;i++){
					//找到当前字段
					if(fm.elements[i]==target){
						//将光标焦点移入下一个
						fm.elements[i+1].focus();
						//中途返回
						return;
					}
				}
			
			}
		}
		
		
	</script>
</html>
